<template>
	<view>
		<block v-if="addTitle=='地址簿'">
			<block v-if="addresList">
				<view class="addheader">    <!-- 头部 -->
					<image @tap="getList(search)" src="../../static/order/search.png" mode=""></image>
					<input type="text" @input="getSearch($event)" placeholder-style="color:#cccccc;" v-model="search" placeholder="请输入地址/手机号/姓名" value="" />
					<image @tap="claerSear()" src="../../static/order/clean.png" mode=""></image>
				</view>
				<view class="addinner">   <!-- 列表 -->
					<view class="every" v-for="(item,index) in addresList" :key="index">
						<view class="users">
							<view v-if="item.phoneHeader">{{item.name}}  {{item.mobile}},{{item.phoneHeader}}</view>
							<view v-else>{{item.name}}  {{item.mobile}}</view>
							<view>{{item.addrPname}}{{item.addrCname}}{{item.addrZname?item.addrZname:''}}{{item.address}}{{item.houseNumber?item.houseNumber:''}}</view>
						</view>
						<view class="imgs">
							<image @tap="goAdd('edit',item)" src="../../static/order/edit.png" mode=""></image>
							<image @tap="deleAddres(item.id)" src="../../static/order/delete.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="dian"></view>
			</block>
			<block v-if="addresList.length=='0'&&search">
				<view class="addheader">    <!-- 头部 -->
					<image @tap="getList(search)" src="../../static/order/search.png" mode=""></image>
					<input type="text" @input="getSearch($event)" placeholder-style="color:#cccccc;" v-model="search" placeholder="请输入地址/手机号/姓名" value="" />
					<image @tap="claerSear()" src="../../static/order/clean.png" mode=""></image>
				</view>
				<view class="nolist">
					<image src="../../static/order/noloc.png" mode=""></image>
					<view>暂无搜索地址</view>
				</view>
			</block>
			<block v-if="addresList.length=='0'&&!search">
				<view class="nolist">
					<image src="../../static/order/noloc.png" mode=""></image>
					<view>暂无地址</view>
				</view>
			</block>
			<view class="addbotom" @tap="goAdd('news')">   <!-- 底部 -->
				<image src="../../static/order/addelse.png" mode=""></image>
				<text>新增地址</text>
			</view>
		</block>
		<block v-else>
			<block v-if="addresList">
				<view class="addinner noclick">   <!-- 列表 -->
					<view class="every" v-for="(item,index) in addresList" :key="index">
						<view class="users" @tap="goOrder(item)">
							<view v-if="item.phoneHeader">{{item.name}}  {{item.mobile}},{{item.phoneHeader}}</view>
							<view v-else>{{item.name}}  {{item.mobile}}</view>
							<view>{{item.addrPname}}{{item.addrCname}}{{item.addrZname?item.addrZname:''}}{{item.address}}{{item.houseNumber?item.houseNumber:''}}</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="nolist">
					<image src="../../static/order/noloc.png" mode=""></image>
					<view>暂无可用地址</view>
				</view>
			</block>
		</block>
	</view>
</template>

<script>
	import { addressList , delectAddress } from '@/scr/api/address.js';
	export default{
		data(){
			return{
				addresList:"",
				addTitle:'',
				search:'',
			}
		},
		onLoad(e) {
			this.addTitle=e.heardTitle
			uni.setNavigationBarTitle({
			　　title: e.heardTitle
			})
			this.getList()
		},
		methods:{
			goAdd(txt,item){
				if(txt=='news'){
					uni.navigateTo({
						url:"./add?heardTitle=新增地址"
					})
				}else{
					var ntem=JSON.stringify(item)
					uni.navigateTo({
						url:"./add?heardTitle=编辑地址&list="+ntem
					})
				}
			},
			claerSear(){
				this.search=''
				this.getList()
			},
			goOrder(item){  // 返回配送下单
				var list = JSON.stringify(item)
				uni.reLaunch({
					url:"../placeOrder/order?putList="+list
				})
			},
			getSearch(e){
				this.getList(e.detail.value)
			},
			getList(txt){   //  获取列表
				addressList({search:txt}).then(res => {
					if(res.code=='200'){
						if(res.data.data.length>0){
							this.addresList=res.data.data
						}else{
							this.addresList=''
						}
					}else{
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 2000
						})
					}
				})
			},
			deleAddres(id){
				var that=this
				uni.showModal({
				   title: '提示信息',
				   content: '确定要删除此条地址吗？',
				   success: function (res) {
				      if (res.confirm) {
				         delectAddress({id:id}).then(res => {
				         	if(res.code=='200'){
				         		uni.showToast({
				         			icon: 'none',
				         			title: res.message,
				         			duration: 2000
				         		})
				         		that.getList()
								 that.search=''
				         	}else{
				         		uni.showToast({
				         			icon: 'none',
				         			title: res.message,
				         			duration: 2000
				         		})
				         	}
				         })
				      } else if (res.cancel) {
				         
				      }
				   }
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.addheader{  // 头部
		width: 686rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 39rpx;
		margin: 32rpx auto;
		display: flex;
		align-items: center;
		overflow: hidden;
		image{
			width: 38rpx;
			height: 38rpx;
			margin: 0 22rpx 0 36rpx;
		}
		image:last-child{
			margin: 0 0 0 10rpx;
		}
		input{
			width: 520rpx;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 28rpx;
			color: #222222;
		}
	}
	
	.addinner{  // 列表
		width: 100%;
		height: auto;
		background: #fff;
		box-sizing: border-box;
		padding: 0 32rpx;
		// margin-bottom: 160rpx;
		.every{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 0;
			border-bottom: 1px solid #EEEEEE;
			.imgs{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 20%;
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
			.users{
				width: 77%;
				view:first-child{
					font-size: 34rpx;
					color: #222;
					font-weight: 600;
					margin-bottom: 14rpx;
				}
				view:last-child{
					font-size: 26rpx;
					color: #999999;
					font-weight: 400;
				}
			}
		}
	}
	
	.dian{
		width: 100%;
		height: 160rpx;
	}
	
	.noclick{
		margin-top: 24rpx;
		margin-bottom: 0;
		.users{
			width: 100%;
		}
	}
	
	.addbotom{  //  底部
		width: 100%;
		height: 130rpx;
		background: #1F8BFF;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		image{
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
		text{
			font-size: 34rpx;
			color: #fff;
		}
	}
	
	.nolist{  // 无数据
		position: fixed;
		left: 50%;
		top: 30%;
		transform: translateX(-50%);
		image{
			width: 246rpx;
			height: 174rpx;
		}
		view{
			font-size: 28rpx;
			color: #999999;
			text-align: center;
			margin-top: 48rpx;
		}
	}
</style>
